<template>
  <div>
    <ul class="mui-table-view">
      <li v-for="item in list" :key="item.id" class="mui-table-view-cell mui-media">
        <routerLink :to="'/home/newInfo/'+item.id" href="javascript:;">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            <div class="tlt">{{item.title}}</div>
            <p class="mui-ellipsis">{{item.zhaiyao}}</p>
          </div>
        </routerLink>
      </li>
    </ul>
  </div>
</template>

<script>
import {api} from '@/common/api.js'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getLunBo()
  },
  methods: {
    getLunBo () {
      this.$axios.get(`${api}getnewslist`).then(res => {
        this.list = res.data.message
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .mui-media-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
</style>
